<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/jquery-1.8.3.min.js "></script>
    <!-- 轮播图 -->
    <script src="./lib/swiper/js/swiper.js"></script>
    <script>
        $("html")[0].style.fontSize = window.screen.width / 10 + "px";
        if (window.screen.width >= 414) {
            $("html")[0].style.fontSize = 41.4 + "px";
        }
    </script>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./lib/swiper/css/swiper.min.css">
    <script src="./lib/index.js"></script>
    <script src="./lib/template-web.js"></script>
</head>

<body>
    <div class="container">
        <!-- 头部 -->
        <div class="header">
            <input class="search" type="text" placeholder="酒店/目的地/景点/航班">
            <a href="#">
                <img src="./imgs/icon.png" alt="">
                <span>我的</span>
            </a>
        </div>
        <!-- 轮播图 -->
        <div class="banner">
            <!-- Swiper -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./imgs/banner01.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./imgs/banner02.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./imgs/banner03.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./imgs/banner04.jpg" alt="">
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="main">
            <div class="navbar">
                <a href="">
                    <img src="./imgs/nav1.png" alt="">
                    <span>周边游</span>
                </a>
                <a href="">
                    <img src="./imgs/nav2.png" alt="">
                    <span>周边游</span>
                </a>
                <a href="">
                    <img src="./imgs/nav3.png" alt="">
                    <span>周边游</span>
                </a>
                <a href="">
                    <img src="./imgs/nav4.png" alt="">
                    <span>周边游</span>
                </a>
                <a href="">
                    <img src="./imgs/nav5.png" alt="">
                    <span>周边游</span>
                </a>
            </div>
            <div class="center">
                <div class="section section1">
                    <div class="left">酒店</div>
                    <div class="right">
                        <a href="#">你好</a>
                        <a href="#">你好</a>
                        <a href="#">你好</a>
                        <a href="#">你好</a>
                    </div>
                </div>
                <div class="section section2">
                    <div class="left">酒店</div>
                    <div class="right">
                        <a href="#">你好</a>
                        <a href="#">你好</a>
                        <a href="#">你好</a>
                        <a href="#">你好</a>
                    </div>
                </div>
                <div class="section section3">
                    <div class="left">酒店</div>
                    <div class="right">
                        <a href="#">你好</a>
                        <a href="#">你好</a>
                        <a href="#">你好</a>
                        <a href="#">你好</a>
                    </div>
                </div>
            </div>
            <div class="bottombar">
                <a href="">
                    <img src="./imgs/subnav1.png" alt="">
                    <span>当地向导</span>
                </a>
                <a href="">
                    <img src="./imgs/subnav2.png" alt="">
                    <span>当地向导</span>
                </a>
                <a href="">
                    <img src="./imgs/subnav3.png" alt="">
                    <span>当地向导</span>
                </a>
                <a href="">
                    <img src="./imgs/subnav4.png" alt="">
                    <span>当地向导</span>
                </a>
                <a href="">
                    <img src="./imgs/subnav5.png" alt="">
                    <span>当地向导</span>
                </a>
                <a href="">
                    <img src="./imgs/subnav6.png" alt="">
                    <span>当地向导</span>
                </a>
                <a href="">
                    <img src="./imgs/subnav7.png" alt="">
                    <span>当地向导</span>
                </a>
                <a href="">
                    <img src="./imgs/subnav8.png" alt="">
                    <span>当地向导</span>
                </a>
                <a href="">
                    <img src="./imgs/subnav9.png" alt="">
                    <span>当地向导</span>
                </a>
                <a href="">
                    <img src="./imgs/subnav10.png" alt="">
                    <span>当地向导</span>
                </a>
                <a href="">
                    <img src="./imgs/subnav11.png" alt="">
                    <span>当地向导</span>
                </a>
                <a href="">
                    <img src="./imgs/subnav12.png" alt="">
                    <span>当地向导</span>
                </a>
            </div>
        </div>
        
    </div>
    <div class="searchpage">
        <div class="header">
            <a class="back"></a>
            <input class="searchtxt" type="text" placeholder="酒店/目的地/景点/航班">
            <a class="search" >
               搜索
            </a>
        </div>
        <div class="searchhistory">
            <p>搜索历史</p>
            <ul>
                <li>aban</li>
                <li>aban</li>
                <li>aban</li>
                <li class="clear">清空搜索历史</li>
            </ul>
            
        </div>
    </div>
</body>

</html>
<script id="searchlist" type="text/html">
    <p>搜索历史</p>
    <ul>
        <!-- 第一种方式 -->
        {{each list}}
        <li>{{$value}}</li>
        {{/each}}
        <!-- 第二种方式 -->
        <!-- {{each list v }}
        <li>{{v}}</li>
        {{/each}} -->
        <li class="clear">清空搜索历史</li>
    </ul>
</script>

